<template>
  <view class="comment-reply-focus iphonex-padding-bottom" :style="[{ 'min-height': minHeight + 40 + 'rpx' }]"
        @click.stop="">
    <view class="text-box"
          :style="[{ 'min-height': minHeight + 40 + 'rpx' }, { 'max-height': maxHeight + 40 + 'rpx' }]">
      <view>{{ currentInput }}</view>
      <textarea
          class="weui-textarea"
          :placeholder="placeholder"
          :maxlength="maxlength"
          :show-confirm-bar="false"
          :adjust-position="true"
          :value="currentInput ? currentInput : ''"
          :disable-default-padding="false"
          :confirm-hold="confirmHold"
          :focus="focus"
          fixed="true"
          cursor-spacing="20px"
          confirm-type="send"
          @input="getInputComment"
          @focus="focusHandle"
          @blur="blurHandle"
          @confirm="inputConfirm"
      />
    </view>
  </view>
</template>

<script>
import props from './props.js';

/**
 *  文本框输入
 //
 : {
 * @property {Number}    focus      获取焦点（默认 false ）
 * @property {Number}    minHeight    最小高度（默认 40 ）
 * @property {Number}    maxHeight    最大高度（默认 120 ）
 * @property {String}    placeholder  提示内容
 * @property {Number}    maxlength    文字长度（默认 500 ）
 * @property {Boolean}    confirmHold  点击键盘右下角按钮时是否保持键盘不收起（默认 false ）
 * @property {String}    confirmType  设置键盘右下角按钮的文字: send发送,search搜索,next下一个,go前往,done完成（默认 done ）
 *
 * @event {Function}  change  点击右下角“确认”按钮触发
 * @event {Function}  focus  输入框聚焦时触发，event.detail = { value, height }，height 为键盘高度
 * @event {Function}  blur  输入框失去焦点时触发，event.detail = {value, cursor}
 * @example <ZTextarea @change="textareaChange" confirmType="send" :confirmHold="true" :minHeight="40" :maxHeight="120" placeholder="请输入"></ZTextarea>
 */

export default {
  model: {
    event: 'input'
  },
  mixins: [props],
  data() {
    return {
      currentInput: ''
    };
  },
  methods: {
    clearContent() {
      this.currentInput = ''
    },
    // 保存当前已经写的内容
    getInputComment(e) {
      this.currentInput = e.detail.value;
      this.$emit('input', this.currentInput);
    },
    focusHandle(e) {
      this.$emit('focus', e);
    },
    blurHandle(e) {
      this.$emit('blur', e);
    },
    inputConfirm(e) {
      this.currentInput = '';
      this.$emit('change', e.detail.value);
    }
  }
};
</script>

<style lang="scss">
@import 'iphone';

.comment-reply-focus {
  width: 100%;
  height: auto;
  // min-height: 80rpx;
  position: relative;

  .text-box {
    width: 100%;
    box-sizing: border-box;
    position: relative;
    // min-height: 80rpx;
    // max-height: 160rpx;
    line-height: 40rpx;
    border: 1rpx solid #e5e5e5;
    border-radius: 5rpx;

    & > view {
      display: block;
      visibility: hidden;
      word-break: break-all;
      word-wrap: break-word;
    }

    .weui-textarea {
      // width: 540rpx;
      width: 100%;
      height: 100%;
      position: absolute;
      left: 0rpx;
      top: 0rpx;
      overflow-y: hidden;
      word-break: break-all;
      word-wrap: break-word;
      padding: 8rpx;
    }
  }
}
</style>
